<!--
* @fileName test.vue
* @author caoke
* @date 2022/08/30 16:46:12
* @version V1.0.0
* @description 
!-->
<template>
  <div class="container">
    <!-- 定义地图显示容器 -->
    <div id="map"></div>
  </div>
</template>


<script>
let map, marker, polygon, drawingManager, lngLat, ap;
export default {
  name: "",
  data() {
    return {
      position: {
        longitude: 0, //经度
        latitude: 0, //纬度
        city: "",
      },
    };
  },
  created() {
    // this.initMap();
    this.getMyLocation();
  },
  mounted() {
    // this.initMap();
  },
  methods: {
    /**
     * /定位获得当前位置信息
     */
    getMyLocation() {
      var geolocation = new qq.maps.Geolocation(
        "3ORBZ-DNZ6G-ZEJQ2-IXUNR-XQVC2-C2FS5",
        "地图测试"
      );
      geolocation.getLocation(this.showPosition, this.showErr);
    },
    showPosition(position) {
      console.log("定位信息", position);
      this.position.latitude = position.lat;
      this.position.longitude = position.lng;
      this.position.city = position.city;
      this.initMap();
    },
    //定位失败再请求定位，测试使用
    showErr() {
      console.log("定位失败，请重试！");
      this.getMyLocation();
    },
    // 地图初始化函数，本例取名为init，开发者可根据实际情况定义
    initMap() {
      // 定义地图中心点坐标
      var center = new window.TMap.LatLng(
        this.position.latitude,
        this.position.longitude
      );
      // 定义map变量，调用 TMap.Map() 构造函数创建地图
      var map = new window.TMap.Map(document.getElementById("map"), {
        center: center, // 设置地图中心点坐标
        zoom: 16, // 设置地图缩放级别
        // pitch: 43.5, // 设置俯仰角
        rotation: 45, // 设置地图旋转角度
      });
      console.log(map);
      console.log(window);
    },
  },
};
</script>
<style lang='scss' scoped>
.container {
  width: 100%;
  height: 100vh;
  background-color: peru;
}
#map {
  width: 100%;
  height: 100%;
}
</style>